﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">
                            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--III级机构设置--III级机构修改
                        </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button v-on:click="add()">变更</el-button>
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>

            <table width="100%" border="1" cellpadding=0 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        I级机构名称/II级机构名称
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="secondKindId" style="margin-left: 0px;">
                            <el-cascader v-model="values" :options="options" v-on:change="handleChange" placeholder="请选择I级机构/II级机构名称" ref="refs" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        III级机构编号
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="thirdKindId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.thirdKindId" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        III级机构名称
                    </td>

                    <td class="TD_STYLE2" height="40px">
                        <el-form-item prop="thirdKindName" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.thirdKindName" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        销售责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="thirdSaleId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.thirdSaleId"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        是否为零售店(是/否)
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="thirdKindIsRetail" style="margin-left: 0px;">
                            <el-select v-model="ruleForm.thirdKindIsRetail" placeholder="请选择是否为零售店" style="width: 240px">
                                <el-option v-for="item in istrue"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
            </table>

            <el-dialog v-model="dialogVisible"
                       title=""
                       width="500"
                       :before-close="handleClose">
                <span>变更成功！</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" v-on:click="close()">
                            返回
                        </el-button>
                    </div>
                </template>
            </el-dialog>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp, ref, reactive, computed } = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const ruleForm = reactive({
                ftkId:"",
                firstKindId:"",//一级机构编号
                firstKindName:"",//一级机构名称
               // firstKind:{},//一级机构名称 改为对象获取
                //secondKind:{},//二级机构名称 改为对象获取
                secondKindId:"",//二级结构编号
                secondKindName:"",//二级结构名称
                thirdKindId:"",//三级机构编号
                thirdKindName:"",//三级机构名称
                thirdSaleId:"",//负责人编号
                thirdKindIsRetail:""//是否为零售店
            })

            let ruleFormRef = ref(null);//表单id
            const dialogVisible = ref(false)
            //表单验证规则
                // 表单验证规则
            // const rules = reactive({
            //     firstKind: [
            //         { required: true, validator: (rule, value, callback) => {
            //             if (!value || Object.keys(value).length === 0) {
            //                 callback(new Error('请选择I级机构名称'));
            //             } else if (!value.firstKindId) {
            //                 callback(new Error('请选择I级机构名称'));
            //             } else if (!value.firstKindName) {
            //                 callback(new Error('请选择I级机构名称'));
            //             } else {
            //                 callback();
            //             }
            //         }, trigger: 'blur' }
            //     ],
            //     secondKind: [
            //         { required: true, validator: (rule, value, callback) => {
            //             if (!value || Object.keys(value).length === 0) {
            //                 callback(new Error('请选择II级机构名称'));
            //             } else if (!value.secondKindId) {
            //                 callback(new Error('请选择II级机构名称'));
            //             } else if (!value.secondKindName) {
            //                 callback(new Error('请选择II级机构名称'));
            //             } else {
            //                 callback();
            //             }
            //         }, trigger: 'blur' }
            //     ],
            //     thirdKindId: [
            //         { required: true, message: 'III级机构编号不能为空', trigger: 'blur' },
            //         { validator: (rule, value, callback) => {
            //             if (value && value.toString().length !== 13) {
            //                 callback(new Error('III级机构编号长度必须为十三位'));
            //             } else {
            //                 callback();
            //             }
            //         }, trigger: 'blur' }
            //     ],
            //     thirdKindName: [
            //         { required: true, message: 'III级机构名称不能为空', trigger: 'blur' }
            //     ],
            //     thirdSaleId: [
            //         { required: true, message: '销售责任人编号不能为空', trigger: 'blur' }
            //     ],
            //     thirdKindIsRetail: [
            //         { required: true, message: '请选择是否为零售店', trigger: 'blur' }
            //     ],
            // });
            const rules = reactive({
                thirdKindName: [
                    { required: true, message: 'III级机构名称不能为空', trigger: 'blur' }
                ],
                thirdSaleId: [
                    { required: true, message: '销售责任人编号不能为空', trigger: 'blur' }
                ],
                thirdKindIsRetail: [
                    { required: true, message: '请选择是否为零售店', trigger: 'blur' }
                ],thirdKindId: [
                    { required: true, message: 'III级机构编号不能为空', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value && value.toString().length !== 13) {
                            callback(new Error('I级机构编号长度必须为十三位'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'blur' }
                ],firstKindId: [
                    { required: true, message: 'I级机构名称不能为空', trigger: 'blur' }
                ],secondKindId: [
                    { required: true, message: 'II级机构名称不能为空', trigger: 'blur' }
                ],
            });
            const select = ref([])//1级结构表下拉框数据
            const select1 = ref([])//2级结构表下拉框数据
            const options = ref([])//级联显示下拉框数据
            const values = ref([])
            const refs = ref()
            const cftkid = ref()//保存原来的三级编号

            const istrue = [{
                value:true,
                label:"是"
            },{
                value:false,
                label:"否"
            }]

            function add(){
                ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.get("/cftk/cftkselectbycftid",{
                            params:{
                                ftkid:ruleForm.thirdKindId
                            }
                        }).then(res =>{
                            if (res.data == null || ruleForm.thirdKindId == cftkid.value){
                                axios.put("/CFTK/CFTKUpdateAsync",null,{
                                    params:ruleForm
                                }).then(res=>{
                                    if (res.data > 0){
                                        ElMessage({
                                        type: 'success',
                                        message: '修改成功！'});
                                        dialogVisible.value = true
                                    }else{
                                        ElMessage({
                                        type: 'error',
                                        message: '修改失败！'});
                                    }
                                }).catch(error =>{
                                    console.info(error)
                                })
                            }else{
                                ElMessage({
                                type: 'error',
                                message: '该III级编号已存在！请修改后再次提交'});
                            }
                        }).catch(error =>{
                            console.info(error)
                        })
                    }
                })
            }

            function close(){
                window.location.href = "/CFTK/Index"
            }

            function edit(){
                window.location.href = "/CFTK/CFTKInsert"
            }

            //查询1级下拉框数据
            function selectOpiton(){
                axios.get("/CFSK/CFFKSelectOption").then(res =>{
                    select.value = res.data;
                }).catch(Error =>{
                    console.info(Error)
                })
            }
            selectOpiton();

            function selectOpiton1(){
                axios.get("/CFTK/CFSKSelectOpiton").then(res =>{
                    select1.value = res.data;
                }).catch(Error =>{
                    console.info(Error)
                })
            }
            selectOpiton1();

            function fill(){
                axios.get("/CFTK/CFTKSelectById").
                then(res =>{
                    ruleForm.ftkId = res.data.ftkId
                    ruleForm.firstKindId = res.data.firstKindId
                    ruleForm.firstKindName = res.data.firstKindName
                    ruleForm.secondKindId = res.data.secondKindId
                    ruleForm.secondKindName = res.data.secondKindName
                    ruleForm.thirdKindId = res.data.thirdKindId
                    cftkid.value = res.data.thirdKindId
                    ruleForm.thirdSaleId = res.data.thirdSaleId
                    ruleForm.thirdKindName = res.data.thirdKindName
                    ruleForm.thirdKindIsRetail = res.data.thirdKindIsRetail
                    console.info(ruleForm.firstKindId)
                    console.info(ruleForm.secondKindId)
                    values.value = [res.data.firstKindId,res.data.secondKindId]
                    console.info(values.value)
                }).catch(error =>{
                    console.info(error)
                })
            }

            fill();

            function cascaders(){
                axios.get("/CFTK/Cascaders").then(res =>{
                    options.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
            }
            cascaders()

            function handleChange() {
                const a = [];
                const b = [];
                const arr = refs.value.getCheckedNodes()[0].pathNodes;
                arr.forEach((i) => {
                    a.push(i.label);
                    b.push(i.value);
                });
                ruleForm.firstKindId = b[0]
                ruleForm.firstKindName = a[0]
                ruleForm.secondKindId = b[1]
                ruleForm.secondKindName = a[1]
            };

            return {
                ruleForm, ruleFormRef, rules,add,dialogVisible,close,edit,select,select1,istrue,options,values,handleChange,refs,
                cftkid
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    body {
        background-color: #ffffcc;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }

    .el-form-item__error {
        color: var(--el-color-danger);
        font-size: 12px;
        left: 0;
        line-height: 1;
        padding-top: 2px;
        position: static !important;
        margin-left: 10px;
        top: 100%;
    }

    .el-form-item {
        display: flex;
        --font-size: 14px;
        margin-bottom: 0px !important;
    }

</style>
